<template>
    <div  class="edit-cate">
        
        <div class="cateBox">
            <el-form label-width="200px" :model="editCate" class="cateForm">
             <!-- 分类信息 -->
             <el-tag>分类信息</el-tag>

             <el-form-item label="分类名称 :" prop="cateName" class="cate-first">
                    <el-input v-model="editCate.editCate" placeholder="请输入" clearable size="large" />
                </el-form-item>

                <el-form-item label="上级分类 :" prop="superior">
                    <el-select v-model="editCate.superior" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in superiortList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="分类排序 :" prop="cateEditSort" >
                    <el-input v-model="editCate.cateEditSort" placeholder="请输入排序数字" clearable size="large" />
                      
                </el-form-item>
                <el-form-item>
                    <el-icon style="margin-left: 50px;margin-right: 8px;"> <WarningFilled /></el-icon>
                        数字越靠前越小
                </el-form-item>

                <el-form-item class="buttonStyle">
                    <el-button disabled type="primary" class="sureBtn">
                        确认
                    </el-button>
                    <!-- <el-button type="default">返回</el-button> -->
                </el-form-item>

        </el-form>
        </div>
    </div>
</template>

<script setup>
import {reactive} from 'vue'
import { WarningFilled  } from '@element-plus/icons-vue'

// 定义初始数据
const editCate = reactive({
   editCate:'',
   superior:'',
})

// 上级分类数据
const superiortList = [
    {
        value: '小学',
        label: '小学',
    },
    {
        value: '初中',
        label: '初中',
    },
    {
        value: '高中',
        label: '高中',
    },
    {
        value: '成教',
        label: '成教',
    },
]

</script>

<style lang="scss" scoped>

.cateForm{
    border-top: 1px solid#e4f1ff;
    height: 100%;
   
}
.edit-cate {
    width: 100%;
    height: 100%;
    min-height: 600px;
    padding: 50px 100px;
    box-sizing: border-box;
    background-color: #fff;
}
// :deep(.cateBox){
   
// }
:deep(.el-from) {
    display: flex;
    flex-direction: column;
    
}
:deep(.cate-first) {
    margin-top: 20px;
}
.el-input {
    width: 320px;
    margin-left: 40px;
}
.el-select{
    margin-left: 40px;
}
.buttonStyle {
    margin: 30px 50px 0 38px;
}

.sureBtn {
    width: 100px;
}


</style>